<template>
	<view class="uni_box home">
		<!-- <navbar title='课程中心' :yin="true">
			</navbar> -->
		<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
		<view class="content">
			<Nheader @getmine="getmine" @getsou="getsou" :keywords="keywords" backgroundColor="#d6edff"></Nheader>
			<view class="htwo">
				<u-swiper :list="swlist" height="300"></u-swiper>
			</view>
			<view class="gongview" v-if="lamp&&lamp!=''">
				<image class="gongicon" src="/static/img/icon_gg.png"></image>
				<text class="gxian"></text>
				<view class="gongcont" v-if="lamp&&lamp!=''">
					<u-notice-bar mode="vertical" :list="lamp" bg-color="none" :volume-icon="false" color="#666666"
						style="width: 100%;" @click="niticeClick"></u-notice-bar>
				</view>
			</view>
			<view class="hthree">

				<view class="hlist">
					<view class="hitem" v-for="(item, index) in menu" :key="index" @click="navClick(item, index)">
						<image class="hicon" :src="item.image"></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="hfour">
				<view class="hfhead">
					<scroll-view class="tuilist" scroll-x>
						<view class="tuiitem" :class="typeinfo.value == item.value ? 'tactive' : ''" v-for="(item, index) in type"
							:key="index" @click="typeClick(item)">
							<text class="tuitit">{{ item.name }}</text>
							<image class="xuans" src="/static/img/xuans.png"></image>
						</view>
					</scroll-view>
					<view class="tuishai">
						<view class="shai" :class="orderinfo.value == item.value ? 'sactive' : ''" v-for="(item, index) in order"
							:key="index" @click="orderClick(item)">{{ item.name }}</view>
						<!-- <view class="shai">价格最高</view>
							<view class="shai">最新</view> -->
						<!-- <view class="shai shaiview">
								<text>筛选</text>
								<image class="icon_sx" src="/static/img/icon_sx.png"></image>
							</view> -->
					</view>
				</view>
				<view class="jiulist">
					<view class="jiuitem" v-for="(item, index) in list" :key="index" @click="moredetail(item)">
						<image class="hebg" :src="item.thmub"></image>
						<view class="jiuright">
							<view class="jone">
								<text class="jname">{{ item.title }}</text>
								<text class="tag-box-price">¥{{item.price}}</text>
							</view>
							<view class="tag-box" v-if="item.tag">
								<view class="box" v-for="(item,index) in item.tag">{{item}}</view>
							</view>
							<view class="bqian">
								<text class="shijie">{{ item.subtitle }}</text>
								<view class="jiesuan ml">去赚钱</view>
							</view>
							<!-- <text class="pjia">￥<text class="pnum">{{ item.price }}</text></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 热更新弹窗 -->
		 <Down :popup_show="popup_show" :versondata="versondata"></Down>

		 <!-- 广告弹窗 -->
		  <YanPop :yanshow="yanshow" :taninfo="taninfo" @yanclose="yanshow=false"></YanPop>
</view>
</template>

<script>
import Down from '@/components/Down/Down'
import YanPop from '@/components/YanPop/YanPop.vue'
export default {
	components: {
		Down,
		YanPop
	},
	data() {
		return {
			popup_show:false,//热更新弹窗
			mshow: false,
			homeinfo: {

			},
			iseyes: false,
			token: uni.getStorageSync('token'),
			indicatorDots: true,
			autoplay: false,
			interval: 2000,
			duration: 500,

			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			swlist: [
				// {
				// 	image: '/static/img/banner.png'
				// },
				// {
				// 	image: '/static/img/banner.png'
				// },
			],
			banner: [],
			hList: [
				{ id: 1, name: '签到红包', img: '/static/img/cone.png' },
				{ id: 2, name: '测试站位', img: '/static/img/ctwo.png' },
				{ id: 3, name: '测试站位', img: '/static/img/cthree.png' },
				{ id: 4, name: '测试站位', img: '/static/img/cfour.png' },
			],
			moreshow: false,
			newinfo: [],
			nlist: [
				'寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			lamp: [
				// '寒雨连江夜入吴',
				// '平明送客楚山孤',
				// '洛阳亲友如相问',
				// '一片冰心在玉壶'
			],
			lamplist: [],
			menu: [],
			order: [],
			orderinfo: {},
			type: [],
			typeinfo: {},
			keywords: '',
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			versondata:{},
			yanshow:false,
			tuimg:'/static/img/img_tcone.png',
			taninfo:{}
		}
	},
	onLoad() {
		this.getconfig();//公共配置
		this.fgetListParams();//首页参数
		this.gettan();//弹窗配置
		// uni.setStorageSync('zhu_color','linear-gradient(-82deg, #4BB6F0, #1D8DFD)')
		// this.$store.commit('initWebsocket');
	},
	onShow() {
		// if(!this.info){
		// 	this.getstatistic();//用户资产
		// }
		this.getinit();//首页即可
		// console.log(this.compareVersions('1.1.9','1.1.9'))
		// #ifdef APP-PLUS
		//更新才有
		
		if(uni.getStorageSync('token')){
			this.getfgetVersion()
		}
		// #endif
		if(!this.list){
			this.fgetListParams();//首页参数
		}
	},
	onPullDownRefresh() {
		// console.log("+++")
		// // uni.stopPullDownRefresh();
		// this.getstatistic();//用户资产
		// setTimeout(() => {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	},

	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		async gettan(){
			let res = await this.$u.api.getTanIndex({
			});
			this.taninfo = res
			if(res.status == 1){
				//弹出首页
				this.yanshow = true
			}
		},
		async getfgetVersion(){
			let res = await this.$u.api.getVersion({
			});
			let version = plus.runtime.version;
			let platform = uni.getSystemInfoSync().platform;
			if(this.compareVersions(version,res.version) == -1){
				//本地版本小于线上 
				console.log('本地版本小于线上')
				this.versondata = res
				this.popup_show = true
			}
		},
		async getconfig() {
			let res = await this.$u.api.configinit({
			});
			uni.setStorageSync('configinfo', res)
			// console.log(uni.getStorageSync('configinfo'))
		},
		getinit() {
			this.getbanner();//banner
			this.getnotice();//公告
			this.fgetMenu();//菜单
			
		},
		async getbanner() {
			let res = await this.$u.api.getBanner({
				mark: 'h5-index'
			});
			// console.log(res)
			this.banner = res
			let swlist = res
			for (let i in swlist) {
				swlist[i].image = swlist[i].imageurl
			}
			this.swlist = swlist

		},
		async getnotice() {
			let res = await this.$u.api.getNotice({
			});
			this.lamplist = res
			let data = res
			let shuzu = []
			for (let i in data) {
				shuzu.push(data[i].title)
			}
			this.lamp = shuzu
		},
		async fgetMenu() {
			let res = await this.$u.api.getMenu({
			});
			// console.log(res)
			this.menu = res

		},
		async fgetListParams() {
			let res = await this.$u.api.getListParams({
				type: 'task'
			});
			// console.log(res)
			this.order = res.order
			if (res.order) {
				this.orderinfo = this.order[0]
			}
			this.type = res.type
			if (res.type) {
				this.typeinfo = this.type[0]
			}
			this.getList()
		},
		async getList() {//列表数据
			let res = await this.$u.api.homelists({
				// limit:this.limit,
				page: this.page,
				type: this.typeinfo.value,
				order: this.orderinfo.value,
				keywords: this.keywords,
			});
			// this.uinfo = res
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];
			if (this.page >= this.last_page) {
				this.status = 'nomore';
			}

		},
		typeClick(item) {
			this.typeinfo = item
			this.getClear()
		},
		orderClick(item) {
			this.orderinfo = item
			this.getClear()
		},
		getClear() {
			this.list = []
			this.page = 1,
				this.status = "loadmore"
			this.getList()
		},
		getsou(e) {
			this.keywords = e
			this.getClear()

		},
		loadmore() {
			let page = this.page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},

		niticeClick() {
			this.navrouter("/pages/TPage/Gonglist");
		},
		getmine() {
			this.mshow = true
			uni.hideTabBar();
		},
		mineclose() {
			this.mshow = false
			uni.showTabBar();
		},
		geteyes() {
			this.iseyes = !this.iseyes
		},
		chainrecharge() {
			this.navrouter("/pages/TPage/Chongbi");
		},
		getlogin() {
			uni.redirectTo({
				url: '/pages/login/login'
			})
		},
		getinvite() {
			this.navrouter("/pages/TPage/Yaoqing?type=home");
		},
		navClick(item, index) {
			let id = item.id
			console.log(index)
			if (id == 3) {
				// 联系客服 跳转对应企业微信
				let url = 'https://work.weixin.qq.com/kfid/kfc271d0ac9befaa993'

				// #ifndef APP-PLUS
				location.href = url
				// #endif
				let wechat = null
				plus.share.getServices(res => {
					wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: 'ww487b59cb17fb3929',//企业ID
							url: url,//客服地址
						}, src => {
						}, err => {
						})
					} else {
						uni.showToast({
							title: '当前环境不支持微信操作', icon: "error"
						});
					}
				});
			} else {
				this.navrouter(item.url)
			}
			// if(index == 0){
			// 	//拉新活动
			// 	this.navrouter("/pages_subject/twoPage/LaXin");
			// }else if(index == 1){
			// 	//签到
			// 	this.navrouter("/pages_subject/twoPage/QianDao");
			// }else if(index == 2){
			// 	//联系客服 跳转对应企业微信
			// 	// this.navrouter("/pages_subject/twoPage/QianDao");
			// }else if(index == 3){
			// 	//邀请好友
			// 	this.navrouter("/pages/TPage/YaoPage");
			// }else if(index == 4){
			// 	//进群学习 进去一个富文本
			// 	// this.navrouter("/pages/TPage/YaoPage");
			// }
			// if(id == 1){
			// 	//签到
			// 	this.navrouter("/pages_subject/twoPage/QianDao");
			// }else if(id == 2){
			// 	//案件委托;
			// 	this.navrouter("/pages/TPage/MyWeituo");
			// }else if(id == 3){
			// 	//案件咨询
			// 	// this.navrouter("/pages/TPage/AnZixun");
			// 	this.navrouter("/pages/TPage/RenGongzixun");

			// }else if(id == 4){
			// 	//文书服务
			// 	// this.navrouter("/pages/TPage/Wenshu");
			// 	// this.navrouter("/pages/TPage/MyWenshu");
			// 	this.navrouter("/pages/TPage/SharedLawyer");
			// }else if(id == 5){
			// 	//共享律师
			// 	this.navrouter("/pages/tabbar/HeTong");
			// }else if(id == 6){
			// 	//法律课堂
			// 	this.navrouter("/pages/TPage/FaKetang");
			// }else if(id == 7){
			// 	//违约金计算
			// 	// this.navrouter("/pages/TPage/Weiyuejin");
			// 	this.navrouter("/pages/TPage/VIpGuwen");
			// }else if(id == 8){
			// 	//更多服务
			// 	// this.moreshow = true
			// 	//套餐服务
			// 	this.navrouter("/pages/TPage/VIpServices");
			// }
		},
		moreclose() {
			this.moreshow = false
		},
		moredetail(item) {
			this.navrouter("/pages_subject/twoPage/DetailHome?id=" + item.id + '&leitype=1');
		},
		moreClick() {
			this.navrouter("/pages/TPage/DayMore");
		},


	}
}
</script>

<style lang="scss" scoped>
page {
	// background-color: #fff;
	background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
}

.content {
	// background-color: #fff;
	background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
	padding-bottom: 130rpx;
	min-height: 100vh;

	.asset {
		margin: 50rpx 45rpx;

		.Total-assets {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 16rpx;

			.zileft {
				display: flex;
				flex-direction: column;

				.zione {
					display: flex;
					flex-direction: row;
					align-items: center;

					.zname {
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 30rpx;
						color: #111111;
						display: inline-block;
						margin-right: 15rpx;
					}

					.yan {
						width: 44rpx;
						height: 30rpx;
					}
				}

				.zinum {
					margin-top: 43rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 50rpx;
					color: #111111;
				}
			}

			.tu {
				margin-left: auto;
				width: 173rpx;
				height: 149rpx;
			}
		}

		.lian {
			height: 80rpx;
			background: #030000;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 60rpx 0 53rpx;
		}
	}

	.htwo {
		padding: 20rpx 30rpx 0;

		/deep/.u-indicator-item-round-active {
			// width: 17px;
			background-color: rgba(89, 255, 246, 1);
		}
	}

	.hthree {
		margin: 40rpx 30rpx 0;

		.hlist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.hitem {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 20%;
				margin-bottom: 40rpx;

				.hicon {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 8rpx;
				}

				text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.gongview {
		margin: 30rpx 30rpx 0;
		// background: #F5F5F5;
		background-color: #fff;
		border-radius: 5rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;

		.gongicon {
			width: 40rpx;
			height: 40rpx;

		}

		.gxian {
			width: 1rpx;
			height: 20rpx;
			background: #CCCCCC;
			display: inline-block;
			margin: 0 20rpx;
		}

		.gongcont {
			flex: 1;
			display: flex;
			width: 70%;

			/deep/.u-notice-bar {
				padding: 0 !important;
			}
		}
	}

	.refu {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 40rpx;

		.remen {
			margin-right: 4rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.htit {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
		display: block;

	}

	.hfour {
		padding: 0 0rpx;

		.hfhead {
			display: flex;
			flex-direction: column;
			// align-items: center;
			// background: #F5F5F5;
			// background: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding:0 30rpx 30rpx;

			.tuilist {
				white-space: nowrap;

				.tuiitem {
					display: inline-block;
					position: relative;
					padding: 18rpx 0;
					margin-right: 60rpx;

					.tuitit {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.xuans {
						width: 100%;
						height: 15rpx;
						position: absolute;
						left: 0%;
						bottom: 0;
						display: none;
					}
				}

				.tactive {
					.tuitit {
						background: linear-gradient(-82deg, #4BB6F0 0%, #1D8DFD 98.53515625%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

					}

					.xuans {
						display: inline-block;
					}
				}
			}

			.tuishai {
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;
				align-items: center;

				.shai {
					padding: 15rpx 20rpx;
					margin-right: 20rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #51565D;
				}

				.sactive {
					background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
					color: #fff;
				}

				.shaiview {
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 0;

					.icon_sx {
						margin-left: 12rpx;
						width: 12rpx;
						height: 12rpx;
					}
				}
			}

			.htittwo {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				display: inline-block;

			}

			.gengview {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: auto;

				.geng {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.icon_next {
					margin-left: 4rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.jiulist {
			padding: 5px 15px;
			.jiuitem {
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				
				display: flex;
				
				background: #fff;
				border-radius: 10px;
				margin-bottom: 10px;
				// padding: 10px;

				// align-items: center;
				.hebg {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.jiuright {
					display: flex;
					flex-direction: column;
					// flex: 1;
					width: 78%;
					.jone{
						display: flex;
						flex-direction: row;

					}
					.tag-box{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						position: relative;
    					margin: 0px 5px 5px 0;
						.box{
							display: inline;
							margin-right: 5px;
							padding: 2px 0px;
							color: #666;
							font-size: 11px;
						}
					}

					.jname {
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #1c1c1d;
						display: inline-block;
						width: 85%;
					}
					.tag-box-price{
						margin-left: auto;
						font-size: 16px;
						margin-left: auto;
						font-family: PingFang SC;
						font-weight: 500;
						color: red;
					}

					.pjia {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF4545;
						display: block;
						margin-top: auto;
					}

					.pnum {
						font-size: 35rpx;
					}

					.bqian {
						margin-top: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
					}
					
					.jiesuan{
						width: 70px;
						height: 22px;
						background: rgb(105, 147, 255);
						color: rgb(255, 255, 255);
						border-radius: 11px;
						margin-left: auto;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.shijie {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 18rpx;
						color: #909AAB;
						display: inline-block;
						margin-right: 10rpx;
						font-size: 10px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #7d7d7d;
						padding: 3px 5px;
						background: rgba(174, 216, 252, .25);
						border-radius: 7px;
						max-width: 58%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.qian {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin: 15rpx;

						.qianjiu {
							padding: 9rpx 12rpx;
							background: #EEEEEE;
							border-radius: 4rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #51565D;
						}
					}

					.yanview {
						display: flex;
						margin-top: auto;
						flex-direction: row;
						align-items: center;

						.yantime {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.icon_eye_s {
							margin-left: auto;
							margin-right: 9rpx;
							width: 28rpx;
							height: 28rpx;
						}

						.yuenum {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

					}
				}
			}
		}
	}
}


</style>
